<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <div class="page">
    <scroller lock-x @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="100" v-show="todolist.length>0">

    <div>
      <div class="money-list-wrap" v-for="item in todolist">
        <div class="displayflex line1">
          <div class="flex1 ft12">{{item.CreateTime | timeshort}}</div>
        </div>
        <div class="displayflex line2">
          <div class="gray flex1 ft12">
            <template>本次赠送:￥{{item.GiveMoney | fixed00}}</template>
          </div>
          <div class="ft17" v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">+{{item.Money | fixed00}}</div>
        </div>
      </div>

      

      <p class="txt-bottom" v-if="totalLength == todolist.length && totalLength>3"><em class="txt">我是有底线的</em></p>
    </div>
    </scroller>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      未找到相关数据
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],
      totalLength: 0,
      showLoad: false,
      count: 0,
      pageindex: 1
    };
  },
  created() {
    this.getData();
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  watch: {},
  methods: {
    onScrollBottom() {
      this.count++;
      if (this.count == 1) {
        this.getData();
        this.$nextTick(() => {
          this.$refs.scrollerBottom.reset();
        });
      }
    },
    getData() {
      if (
        this.totalLength == this.todolist.length &&
        this.todolist.length > 0
      ) {
        return false;
      }
      var self = this;
      self.showLoad = true;
      var query = {
        TenantGuid: this.userinfo.TenantGuid,
        CargoOwnerGuid: this.userinfo.BelongGuid,
        PageSize: 10,
        PageIndex: this.pageindex
      };
      this.Ajax.post("getMfmemberrecharge", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          var result = resp.Datas;
          if (result.length > 0) {
            self.todolist = self.todolist.concat(result);
            self.pageindex++;
            self.count = 0;
          }
          self.totalLength = resp.TotalRecords;
          if (self.pageindex == 2) {
            self.$nextTick(() => {
              if (self.$refs.scrollerBottom.scrollBottomOffset > 0) {
                self.$refs.scrollerBottom.reset({
                  top: 0
                });
              }
            });
          }
        }
      });
    },
  }
};
</script>